<template>
  <el-row>
    <el-col :span="24">
      <el-row v-for="(item, index) in value" :key="item.label">
        <el-col :span="11"><el-input :value="item.label" @input="onSetLabel(index, $event)"/></el-col>
        <el-col :span="2" class="text-center"><span> - </span></el-col>
        <el-col :span="11"><el-input :value="item.value" @input="onSetValue(index, $event)" /></el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button @click="addItem" type="primary" icon="el-icon-edit" class="btn-width" />
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
/**
 *   props:
 *     value
 */
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onSetLabel (index, v) {
      const vm = this
      const r = [
        ...vm.value
      ]
      r[index].label = v
      this.$emit('input', r)
    },
    onSetValue (index, v) {
      const vm = this
      const r = [
        ...vm.value
      ]
      r[index].value = v
      this.$emit('input', r)
    },
    addItem () {
      const vm = this
      const r = [
        ...vm.value
      ]
      r.push({
        label: '',
        value: ''
      })
      this.$emit('input', r)
    },
  }
}
</script>

<style scoped>
.btn-width {
  width: 100%;
}

.text-center {
  text-align: center;
}
</style>
